<template>
  <Row type="flex" justify="center" align="bottom">
    <i-col :span="7">
      <Button type="info" shape="circle" icon="md-log-out" @click="logout">退出</Button>
    </i-col>
    <i-col :span="10" style="height:64px;line-height:64px;">
      <div class="layout-title">
        中国石油陕西销售公司加油站现场智能监管系统
      </div>
    </i-col>
    <i-col :span="7">
      <Menu mode="horizontal" :active-name="$route.name">
        <div class="layout-nav">
          <MenuItem name="home" to="/">
            <Icon type="md-home" />
            主页
          </MenuItem>
          <MenuItem name="monitor" to="/monitor">
            <Icon type="md-videocam" />
            智能监控
          </MenuItem>
          <Submenu name="analysis-submenu" class="analysis-submenu">
            <template slot="title">
              <Icon type="md-stats" />
              智能分析
            </template>
            <MenuItem
              name="sub-company-analysis"
              to="/sub-company-analysis/xian/today"
              class="analysis-submenu-item"
              >分公司智能分析</MenuItem
            >
            <MenuItem
              name="station"
              to="/station-analysis/station/fengchengshilu/today"
              class="analysis-submenu-item"
              >站点智能分析</MenuItem
            >
          </Submenu>
          <MenuItem name="events" to="/events">
            <Icon type="md-alert" />
            报警事件
          </MenuItem>
        </div>
      </Menu>
    </i-col>
  </Row>
</template>

<script>
import { mapActions } from 'vuex'
export default {
  components: {},
  methods: {
    ...mapActions([
      'handleLogOut'
    ]),
    logout () {
      this.handleLogOut().then(() => {
        this.$router.push({
          name: 'login'
        })
      })
    }
  }
}
</script>

<style lang="less">
.ivu-menu-horizontal {
  height: 0rem !important;
  line-height: 3rem !important;
}
.ivu-menu-horizontal.ivu-menu-light:after {
  height: 0rem !important;
}
.ivu-menu-light.ivu-menu-horizontal .ivu-menu-item-active {
  color: #fff !important;
  background-color: #1081b3;
}
.ivu-layout-header {
  background-color: #01237c !important;
}
.layout {
  border: 1px solid #d7dde4;
  background: #f5f7f9;
  // position: relative;
  border-radius: 4px;
  overflow: hidden;
}
.layout-title {
  // width: 600px;
  height: 64px;
  line-height: 64px;
  font-size: 3rem;
  font-weight: bold;
  text-align: center;
  color: #4bdaff;
  border-radius: 0.3rem;
  // float: left;
  // position: relative;
  // top: 1.5rem;
  border-bottom: 0.2rem solid #4bdaff;
  // left: 0px;
}
.ivu-menu-item,
.ivu-menu-submenu {
  color: #fff !important;
  font-weight: bold;
  font-size: 1.4rem !important;
}
.analysis-submenu .analysis-submenu-item.ivu-menu-item-active,
.analysis-submenu-item:hover {
  background: none !important;
  color: #4bdaff !important;
}
.layout-nav {
  // width: 82rem;
  height: 3rem;
  padding-left: 3rem;
  margin: 0 auto;
  // float: right;
}
</style>
